/*
 * @Author: xiaosihan 
 * @Date: 2023-10-21 17:39:59 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-10-22 16:17:24
 */

.goodsColors {
  margin: 4px;
  border: 1px solid #000000;
  padding: 4px;

  .color {
    margin: 8px 0px;
    padding: 8px 0px;
    border-bottom: 1px solid #d3d3d3;

    width: 480px;
    display: inline-block;
    vertical-align: top;

    .img {
      display: inline-block;
      width: 230px;
      height: 230px;
      border: 1px solid #f7f7f7;
      cursor: pointer;
      position: relative;

      :global(.ant-upload) {
        width: 230px !important;
        height: 230px !important;
      }

      .clothImg {
        position: relative;
        width: 230px;
        height: 230px;
        line-height: 230px;
        display: inline-block;

        .frontClothImg,
        .backClothImg,
        .markImg {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 230px;
          height: 230px;
          object-fit: contain;
          pointer-events: none;
        }
      }

    }

    .colorBlock {
      margin-left: 10px;
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 2px solid #999898;
      vertical-align: middle;
      cursor: pointer;
    }

    .names {
      width: 126px;
      vertical-align: middle;
      display: inline-block;
      margin: 0px 4px;
    }

    .input {
      vertical-align: middle;
      margin: 4px;
      width: 120px;
    }

    .del_btn {
      vertical-align: middle;
      margin-left: 4px;
    }
  }

  .add_btn {
    margin: 4px;
  }
}